<template>
  <div class="mod-clcLocationMark__clclocationmark">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-form-item label="网格：" prop="gridId">
          <el-select v-model="state.dataForm.girdId" @change="girdChange" placeholder="网格" clearable>
            <el-option v-for="item in girdList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="自然村：" prop="gridOfVillageId">
          <el-select v-model="state.dataForm.gridOfVillageId" placeholder="自然村" clearable :disabled="!state.dataForm.girdId">
            <el-option v-for="item in gridOfVillageList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="类型">
          <ren-select v-model="state.dataForm.locationType" dict-type="dimension_type" placeholder="类型" ></ren-select>
        </el-form-item>

        <el-form-item label="状态：" prop="status">
          <el-select v-model="state.dataForm.status" placeholder="状态" clearable>
            <el-option label="未标注" value="0"></el-option>
            <el-option label="已标注" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-button type="info" @click="state.exportHandle()">{{ $t("export") }}</el-button>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button v-if="state.hasPermission('clcLocationMark:clclocationmark:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('clcLocationMark:clclocationmark:delete')" type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column prop="girdName" label="网格" header-align="center" align="center"></el-table-column>
      <el-table-column prop="gridOfVillageName" label="自然村" header-align="center" align="center"></el-table-column>
<!--      <el-table-column prop="locationMarkId" label="标注点" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="houseNum" label="门牌号" header-align="center" align="center"></el-table-column>
<!--      <el-table-column prop="userCount" label="人数" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="status" label="类型" header-align="center" align="center" width="150">
        <template v-slot="scope">
          {{ state.getDictLabel("dimension_type", scope.row.locationType) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag type="warning" v-if="scope.row.status=='0'">未标注</el-tag>
          <el-tag type="success" v-if="scope.row.status=='1'">已标注</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('clcLocationMark:clclocationmark:update')" type="primary" link @click="creatbiaozhu(scope.row)">去标记</el-button>
          <el-button v-if="state.hasPermission('clcLocationMark:clclocationmark:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
          <el-button v-if="state.hasPermission('clcLocationMark:clclocationmark:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
          <el-button v-if="state.hasPermission('clcLocationMark:clclocationmark:update')" type="primary" link @click="routeTo(`/clcLocationMark/clchousepersoninfo?locationId=${scope.row.id}&houseNum=${scope.row.houseNum}`)">住户信息 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import {nextTick, onActivated, reactive, ref, toRefs, watch} from "vue";
import AddOrUpdate from "./clclocationmark-add-or-update.vue";
import {useRouter} from "vue-router";
import Template from "@/views/devtools/template.vue";
import {ElNotification} from "element-plus";
import baseService from "@/service/baseService";

const girdList = ref();
const gridOfVillageList = ref();

const view = reactive({
  getDataListURL: "/clcLocationMark/clclocationmark/page",
  getDataListIsPage: true,
  exportURL: "/clcLocationMark/clclocationmark/export",
  deleteURL: "/clcLocationMark/clclocationmark",
  deleteIsBatch: true,
  dataForm: {
    girdId: "",
    gridOfVillageId: "",
    status: "",
    locationType:""
  }
});


onActivated(() => {
  getGridList();
});

const getGridList = () => {
  baseService.get(`/sys/dept/list`).then((res) => {
    girdList.value = res.data[0].children;
    if(state.dataForm.girdId != "") {
      gridOfVillageList.value = girdList.value.filter((item: { id: any; }) => item.id === state.dataForm.girdId )[0].children
    }
  });
};

const girdChange = (e: any) => {
  state.dataForm.gridOfVillageId = ""
  gridOfVillageList.value = [];
  gridOfVillageList.value = girdList.value.filter((item: { id: any; }) => item.id === e)[0].children
};


const state = reactive({ ...useView(view), ...toRefs(view) });
const router = useRouter();
const routeTo = (path: string) => {
  router.push(path);
};

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};
const creatbiaozhu = (row?:any) =>{
  debugger
  router.push({
    path: "/sys/map-plop?pop=true",
    query: {
      craftbomId: row.id,
      girdName: row.girdName,
      gridOfVillageName: row.gridOfVillageName,
      houseNum: row.houseNum,}
  })

}
const mark = (id?: number) => {
  //todo 根据标注点 获取详情
  baseService.get(`/clcLocationMark/clclocationmark/getByMarkId/12344`).then((res) => {
    ElNotification({title: "中午好", message: JSON.stringify(res), duration: 3000});
  });

};
</script>
